<template>
	<div>
		<input type="text" v-model="inputValue" />
		<button @click="onAdd">新增</button>
		<ul>
			<ul-li
				v-for="item in list"
				:key="item.id"
                :id="item.id"
				:value="item.value"
				@onDelete="onDelete"
                @onEditOk="onEditOk"
			></ul-li>
		</ul>
	</div>
</template>
<script>
// 引入li部分的组件
import UlLi from "./UlLi.vue";
let idCounter = 0;
export default {
	components: {
		UlLi,
	},
	data() {
		return {
			inputValue: '',
			// 全量数据
			list: [],
		};
	},
	methods: {
		onAdd() {
			this.list.push({
				id: idCounter++,
				value: this.inputValue,
			});
			this.inputValue = "";
		},
		onDelete(id) {
			this.list = this.list.filter((item) => item.id !== id);
		},
        // 确认修改
        onEditOk(id, editingValue) {
            this.list.find(item => item.id === id).value = editingValue;
        }
	},
};
</script>